<mat-form-field>
  <mat-label>Tooltip position</mat-label>
  <mat-select [formControl]="position">
    @for (positionOption of positionOptions; track positionOption) {
      <mat-option [value]="positionOption">{{positionOption}}</mat-option>
    }
  </mat-select>
</mat-form-field>

<div class="example-container" cdkScrollable>
  <button matButton="elevated" #tooltip="matTooltip"
          matTooltip="Info about the action"
          [matTooltipPosition]="position.value!"
          matTooltipHideDelay="100000"
          aria-label="Button that displays a tooltip that hides when scrolled out of the container"
          class="example-button">
    Action
  </button>
</div>
